<template>
    <div class="agreement-container">
        <el-dialog
            :title="$t('aggreement.title')"
            :visible="visibleInfo"
            width="1200px"
            @close="()=>{$store.commit('setVisibleInfo',false)}">
            <div class="modal-agreement modal-dialog">
                <!-- <div class="modal-body"> -->
                    <form class="form-horizontal" role="form">
                        <h1>{{$t('aggreement.h')}}</h1>
					<br>
					<p>{{$t('aggreement.p')}}</p>
					<h3>{{$t('aggreement.h1')}}</h3>
					<p>{{$t('aggreement.p1.p1')}}</p>
					<p>{{$t('aggreement.p1.p2')}}</p>
					<h3>{{$t('aggreement.h2')}}</h3>
					<h4>{{$t('aggreement.h2.h1')}}</h4>
					<p>{{$t('aggreement.p2.p1')}}</p>
					<p>{{$t('aggreement.p2.p2')}}</p>
					<p>{{$t('aggreement.p2.p3')}}</p>
					<h4>{{$t('aggreement.h2.h2')}}</h4>
					<p>{{$t('aggreement.p2.p4')}}</p>
					<p>{{$t('aggreement.p2.p5')}}</p>
					<p>{{$t('aggreement.p2.p6')}}</p>
					<p>{{$t('aggreement.p2.p7')}}</p>
					<h3>{{$t('aggreement.h3')}}</h3>
					<p>{{$t('aggreement.p3.p1')}}</p>
					<p>{{$t('aggreement.p3.p2')}}</p>
					<p>{{$t('aggreement.p3.p3')}}</p>
					<p class="font-bold">{{$t('aggreement.p3.p3.p1')}}</p>
					<p class="font-bold">{{$t('aggreement.p3.p3.p2')}}</p>
					<p class="font-bold">{{$t('aggreement.p3.p3.p3')}}</p>
					<p>{{$t('aggreement.p3.p4')}}</p>
					<p>{{$t('aggreement.p3.p5')}}</p>
					<h3>{{$t('aggreement.p4.title')}}</h3>
					<p>{{$t('aggreement.p4.p1')}}</p>
					<p>{{$t('aggreement.p4.p2.2')}}</p>
					<p>{{$t('aggreement.p4.p3')}}</p>
					<p>{{$t('aggreement.p4.p4')}}</p>
					<p class="font-bold">{{$t('aggreement.p4.p4.p1')}}</p>
					<p class="font-bold">{{$t('aggreement.p4.p4.p2')}}</p>
					<p class="font-bold">{{$t('aggreement.p4.p4.p3')}}</p>
					<p class="font-bold">{{$t('aggreement.p4.p4.p4')}}</p>
					<p class="font-bold">{{$t('aggreement.p4.p4.p5')}}</p>
					<p>{{$t('aggreement.p4.p5')}}</p>
					<p>{{$t('aggreement.p4.p6')}}</p>
					<h3>{{$t('aggreement.p5.title')}}</h3>
					<p>{{$t('aggreement.p5.p1')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p1.p1')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p1.p2')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p1.p3')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p1.p4')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p1.p5')}}</p>
					<p>{{$t('aggreement.p5.p2')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p2.p1')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p2.p2')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p2.p3')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p2.p4')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p2.p5')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p2.p6')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p2.p7')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p2.p8')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p2.p9')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p2.p10')}}</p>
					<p>{{$t('aggreement.p5.p3')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p3.p1')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p3.p2')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p3.p3')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p3.p4')}}</p>
					<p class="font-bold">{{$t('aggreement.p5.p3.p5')}}</p>
					<p>{{$t('aggreement.p5.p4')}}</p>
					<p>{{$t('aggreement.p5.p4.p1')}}</p>
					<p>{{$t('aggreement.p5.p4.p2')}}</p>
					<p>{{$t('aggreement.p5.p4.p3')}}</p>
					<p>{{$t('aggreement.p5.p5')}}</p>
					<p>{{$t('aggreement.p5.p5.p1')}}</p>
					<p>{{$t('aggreement.p5.p6')}}</p>
					<p>{{$t('aggreement.p5.p6.p1')}}</p>
					<p>{{$t('aggreement.p5.p7')}}</p>
					<p>{{$t('aggreement.p5.p7.p1')}}</p>
					<h3>{{$t('aggreement.p6.title')}}</h3>
					<p>{{$t('aggreement.p6.p1')}}</p>
					<p>{{$t('aggreement.p6.p2')}}</p>
					<p>{{$t('aggreement.p6.p3')}}</p>
					<p>{{$t('aggreement.p6.p4')}}</p>
					<h3>{{$t('aggreement.p7.title')}}</h3>
					<p>{{$t('aggreement.p7.p1')}}</p>
					<p class="font-bold">{{$t('aggreement.p7.p1.p1')}}</p>
					<p class="font-bold">{{$t('aggreement.p7.p1.p2')}}</p>
					<p class="font-bold">{{$t('aggreement.p7.p1.p3')}}</p>
					<p class="font-bold">{{$t('aggreement.p7.p1.p4')}}</p>
					<p>{{$t('aggreement.p7.p2')}}</p>
					<p class="font-bold">{{$t('aggreement.p7.p2.p1')}}</p>
					<p class="font-bold">{{$t('aggreement.p7.p2.p2')}}</p>
					<h3>{{$t('aggreement.p8.title')}}</h3>
					<p>{{$t('aggreement.p8.p1')}}</p>
					<p>{{$t('aggreement.p8.p2')}}</p>
					<p>{{$t('aggreement.p8.p3')}}</p>
					<p>{{$t('aggreement.p8.p4')}}</p>
					<h3>{{$t('aggreement.p9.title')}}</h3>
					<p>{{$t('aggreement.p9.p1')}}</p>
					<p>{{$t('aggreement.p9.p2')}}</p>
					<p class="footer signature">{{$t('aggreement.footer')}}</p>
                    </form>
                <!-- </div> -->
            </div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="()=>{$store.commit('setVisibleInfo',false)}">{{$t('agreement.IDisgree')}}</el-button>
				<el-button @click="save">{{$t('agreement.IAgree')}}</el-button>
			</div>
        </el-dialog>
    </div>
</template>

<script scoped>
import moment from 'moment'
export default {
    components:{

    },
    props:{
		agreeResData:{
			type:Object,
			default:()=>{return {}}
		}
    },
    data(){
        return {
            mapToolType:''
        }
    },
    watch:{

    },
    computed: {
        visibleInfo(){
            return this.$store.state.sysStore.visibleInfo
        }
    },
    mounted(){
    },
    methods:{
		async save(){
			let res = await this.API.loginAgreeMents({
				id:this.agreeResData.user.ids,
				time:moment().format("YYYY-MM-DD HH:mm:ss"),
				domain:window.location.host
			})
			if(this.comm.showMsg(res.success)){
				let res = this.agreeResData
				sessionStorage.setItem('token',res.token);
				sessionStorage.setItem('loginURL',window.location);//ODM需求保存登录地址
				sessionStorage.setItem('loginTime',this.$options.filters['dateFormat'](new Date()));
	
				sessionStorage.setItem('userObj',JSON.stringify(res.user));//保存用户数据
				localStorage.setItem('userId',res.user.ids);
				localStorage.setItem('userType',res.user.userType);
	
				let userType=res.user.userType
				if(userType!=5){
					this.$router.push({ path: '/overview_agent' })
				}else{
					this.$router.push({ path: '/overview' })
				}
				this.$store.commit('setVisibleInfo',false)
			}
		}
    }
}
</script>

<style lang="less">

.agreement-container{

    .el-dialog{
		color:#F5B739
	}
	.el-dialog p:not(.font-bold){
		text-indent:2em
	}
	.el-dialog .el-dialog__body{    
		margin: 0px;
		padding:20px 60px;
    	overflow: auto;
    	text-align: justify;
    	background: #EFEFEF;
	}
	.el-dialog .modal-footer {
	    background: #EFEFEF;
	}
	.el-dialog{
		width:60%;
	}
	.el-dialog .modal-header {
	    padding: 10px;
	    border: none;
	    background: #5A5A5A;
	}
	.el-dialog .modal-header .modal-title{
    	text-align: left;
    	color:#fff; 
    	font-size:20px;
	}
	.el-dialog .form-horizontal h1{
		font-size: 33px;
	    text-align: center;    
	    color: #ed701a;
	}
	.el-dialog .form-horizontal h3{
	    color: #ED701A;    
	    font-size: 23px;
	}
	.el-dialog .form-horizontal h4{
		font-size: 16px;
	    color: #ed701a;
	    margin-left: 10px;
	}
	.el-dialog .form-horizontal p{
		color:#747474;
		font-size: 15px;
	}
	.el-dialog .form-horizontal p span{
		color:#ED701A;
		font-size: 18px;
	}
	.el-dialog .form-horizontal p.p-list{
		position:relative;
		margin-left: 65px;
		font-size: 13px;
	    text-indent: 0;
	    color: #424242;
	}
	.el-dialog .form-horizontal p.p-list:before{
		position: absolute;
	    content: '';
	    width: 7px;
	    height: 7px;
	    border-radius: 50%;
	    background: #00a335;
	    left: -20px;
	    top: 6px;
	}
	.el-dialog .font-bold{
		font-weight: bold;   
		margin-left: 50px;
	}
	.el-dialog .modal-footer{
		text-align: center;
	}
	.el-dialog .cancelUser {
	    /* position: absolute;
	    right: 30px; */
	    padding: 5px 0;
	    color: #8d8d8d;
	    text-decoration: underline;
	    display: block;
	    bottom: 40px;
	    float: right;
	    font-size: 12px;
	}
	.el-dialog .cancelUser:hover{
		color:#666;
	}
	.el-dialog.modal-dialog>.modal-content .btn:last-child{
		margin-left:30px;
	}
	.el-dialog .signature{
	    margin-top: 30px;
		text-align:right;
	}
	.el-dialog hr{
		margin-top: 40px;
	    margin-bottom: 40px;
	    /* border-top: 1px solid #cecece; */
	    border-top: 1px dashed #00a335;
	}
	@media screen and (min-width:0) and (max-width:500px){
		.el-dialog .cancelUser{
			float:none;
		}
	}
	@media screen and (min-width:0) and (max-width:1000px){
		.el-dialog{
			width: 95% !important;;
			// height:90%;
    		margin: 10px auto;
		}
		.el-dialog .el-dialog__body {
		    padding: 10px;
		}
		.el-dialog.modal-dialog>.modal-content .btn:last-child {
		    margin-left: 10px;
		}
		.modal-dialog>.modal-content .btn {
		    padding: 0 10px;
		}
		.el-dialog .form-horizontal h1 {
	    	font-size: 18px;
	    }
		.el-dialog .form-horizontal h3 {
		    font-size: 16px;
		}
	}
	@media screen and (min-width:1000px){
		.el-dialog{
			width: 60% !important;
			// height:80%;
		}
		.el-dialog .modal-content{
			height:100%;
		}
		.el-dialog .el-dialog__body {
		    height:90%;
		}
	}
	
   .box.box-solid.box-primary>.box-header>h5 {
	    margin:0;
	}
	.btn-primary,.btn-default {
	    border: 1px solid #C4C4C4;
	    background: rgba(0,0,0,0);
	    color: #636162;
	    margin-right: 5px;
	    border-radius: 3px;
	}
	.btn-primary:hover,
	.btn-primary:focus,
	.btn-default:hover,
	.btn-default:focus {
	    background-color: #5a5a5a;
	    border-color: #5a5a5a;
	    color: #fff;
	}
	.el-dialog{
		height: calc(100% - 200px);
	}
	.el-dialog .el-dialog__body {
		height: calc(90% - 50px);
	}
	.el-dialog__footer {
		padding: 10px;
		box-sizing: border-box;
		background: #efefef;
		border-top: 1px solid #d8d8d8;
		text-align: center;
		.el-button--small, .el-button--small.is-round {
			padding: 9px 30px;
		}
	}
}
</style>